import { Link } from '@/src/navigation'
import Image from 'next/image'
import { RefObject } from 'react'

import arrowRightWidthBgIcon from '@/public/arrow_right_whitebg.png'

interface ProductProps {
  id: string
  picture: string
  name: string
  desc: string
  m: {
    exploreMore: string
  }
  myRef?: RefObject<HTMLDivElement>
}

const Product: React.FC<ProductProps> = (props) => {
  const { id, myRef, picture, name, desc, m } = props
  return (
    <Link href={`/product-detail/${id}`}>
      <div
        ref={myRef}
        className='group flex-shrink-0 relative w-[13.3125rem] h-[17.5rem] lg:w-[17.75rem] lg:h-[23.3125rem] 2xl:w-[26.625rem] 2xl:h-[35rem] p-[0.9375rem] lg:px-[1.25rem] lg:py-[1.5rem] 2xl:px-[1.9375rem] 2xl:py-[2.1875rem] flex flex-col justify-end cursor-pointer'
      >
        {/* 图片 */}
        <Image
          src={picture}
          alt='picture'
          fill
          style={{ objectFit: 'cover' }}
          sizes='(max-width: 1024px) 55vw, (max-width: 1236px) 30vw, 30vw'
        />
        {/* 内容 */}
        <div className='z-20 relative group-hover:translate-y-[-3.125rem] 2xl:group-hover:translate-y-[-5rem] transition-transform duration-200 ease-in-out'>
          <div className='text-[1rem] leading-[1.2rem] text-white font-bold lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[1.125rem] 2xl:leading-[1.4rem]'>
            {name}
          </div>
          <div className='h-1 lg:h-3 2xl: 2xl:h-4' />
          <div className='text-[0.875rem] leading-[1.125rem] text-white text-opacity-50 font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[1.125rem] 2xl:leading-[1.4rem] line-clamp-3'>
            {desc}
          </div>
        </div>
        {/* Hover 时出现的遮罩 */}
        <div className='z-10 opacity-0 group-hover:opacity-100 absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-b from-product-card-gradient-bottom to-product-card-gradient-top transition-opacity duration-200 ease-in-out' />
        {/* Hover 时出现的提示文本 */}
        <div className='z-20 absolute left-[1.25rem] bottom-[1.5rem] 2xl:left-[1.875rem] 2xl:bottom-[2.1875rem] opacity-0 lg:group-hover:opacity-100 flex items-center transition-opacity duration-200 ease-in-out'>
          <div className='relative w-[0.9375rem] h-[0.9375rem] 2xl:w-[1.375rem] 2xl:h-[1.375rem]'>
            <Image
              src={arrowRightWidthBgIcon}
              alt='arrow right icon'
              fill
              sizes='0.9375rem'
            />
          </div>
          <div className='w-[0.3125rem] lg:w-2' />
          <div className='text-[0.75rem] leading-[1rem] text-white 2xl:text-[1.125rem] 2xl:leading-[1.4rem]'>
            {m.exploreMore}
          </div>
        </div>
      </div>
    </Link>
  )
}

export default Product
